<template>
  <!-- 遮罩层 + 过渡动画 -->
  <!--#ifdef H5  -->
  <transition name="fade-pop">
    <!--#endif-->
    <view v-if="show" class="uu-cancel-mask" @touchmove.stop.prevent>
      <!-- 弹窗主体 -->
      <view class="uu-cancel-card">
        <view class="uu-cancel-header">
          <text class="uu-cancel-title">{{ title }}</text>
        </view>
        <view class="uu-cancel-content">
          <text>{{ content }}</text>
        </view>
        <view class="uu-cancel-actions">
          <!-- 左侧为确认取消订单（危险操作） -->
          <view class="btn btn-outline" @click.stop="onConfirm">{{ confirmText }}</view>
          <!-- 右侧为关闭弹窗（再想想） -->
          <view class="btn btn-primary" @click.stop="onCancel">{{ cancelText }}</view>
        </view>
      </view>
    </view>
    <!--#ifdef H5  -->
  </transition>
  <!--#endif-->

</template>

<script setup lang="ts">
// 取消订单确认弹窗（自定义样式）
// - 使用 v-model:show 控制显示
// - 点击“取消订单”触发 confirm 事件；点击“我再想想”触发 cancel 事件

import { computed } from 'vue'

const props = withDefaults(defineProps<{
  show: boolean
  title?: string
  content?: string
  confirmText?: string
  cancelText?: string
  icon?: string
}>(), {
  title: '系统提示',
  content: '您确定要取消订单吗？',
  confirmText: '取消订单',
  cancelText: '我再想想',
  icon: ''
})

const emit = defineEmits<{
  (e: 'update:show', val: boolean): void
  (e: 'confirm'): void
  (e: 'cancel'): void
}>()

const show = computed({
  get: () => props.show,
  set: (val: boolean) => emit('update:show', val)
})

const onConfirm = () => {
  emit('confirm')
  emit('update:show', false)
}

const onCancel = () => {
  // 我再想想
  emit('cancel')
  emit('update:show', false)
}
</script>

<style lang="less" scoped>
.uu-cancel-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.uu-cancel-card {
  width: 642rpx;
  height: 419rpx;
  border-radius: 83rpx 83rpx 83rpx 83rpx;
  overflow: hidden;
  box-shadow: 0 12rpx 60rpx rgba(0, 0, 0, 0.15);
  background-image: url('/static/images/order/bc.png');
  background-size: 100% 100%;
}

.uu-cancel-header {
  height: 150rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.uu-cancel-title {
  font-weight: 600;
  font-size: 38rpx;
  color: #333333;
}

.uu-cancel-content {
  padding: 10rpx 40rpx 20rpx 40rpx;
  text-align: center;
  font-weight: 500;
  font-size: 27rpx;
  color: #333333;
}

.uu-cancel-actions {
  display: flex;
  gap: 24rpx;
  padding: 50rpx 50rpx;
}

.btn {
  width: 250rpx;
  height: 77rpx;
  line-height: 77rpx;
  text-align: center;
  font-weight: 600;
  font-size: 28rpx;
  border-radius: 58rpx 58rpx 58rpx 58rpx;
}

.btn-outline {
  color: #AAA;
  background: #fff;
  border: 2rpx solid #AAAAAA;
}

.btn-primary {
  color: #000;
  border: 2rpx solid #00E9BF;
  background: #00E9BF;
}

/* #ifdef H5 */
/*
  过渡动画：
  - 遮罩淡入/淡出（opacity）
  - 卡片缩放+轻微上移
*/
.fade-pop-enter-active,
.fade-pop-leave-active {
  transition: opacity 0.2s ease;
}

.fade-pop-enter-from,
.fade-pop-leave-to {
  opacity: 0;
}

.fade-pop-enter-active .uu-cancel-card,
.fade-pop-leave-active .uu-cancel-card {
  transition: transform 0.24s cubic-bezier(0.2, 0.95, 0.4, 1), opacity 0.24s ease;
}

.fade-pop-enter-from .uu-cancel-card,
.fade-pop-leave-to .uu-cancel-card {
  transform: scale(0.96) translateY(12rpx);
  opacity: 0.6;
}

/* #endif */
</style>
